<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="clock">
        <div class="panel">

            <div class="circle"></div>
            <div class="secend hand"></div>
            <div class="minute hand"></div>
            <div class="hour hand"></div>
            <div class="pan"></div>
            <div class="dial-container">
                <div class="dial"></div>
                <div class="dial"></div>
                <div class="dial"></div>
                <div class="dial"></div>
                <div class="dial"></div>
                <div class="dial"></div>
            </div>
        </div>

    </div>
    <script>
        onload = function () {

            let sHand = document.querySelector('.secend');
            let mHand = document.querySelector('.minute');
            let hHand = document.querySelector('.hour');
            let hands = document.querySelectorAll('.hand');

            //根据date对象设置dom时钟
            function setClock(date) {
                let h = date.getHours();
                //由于美秒都要判断，所有没让定义h的时候就用三目运算
                h = h>12 ? h - 12 : h;
                let m = date.getMinutes();
                let s = date.getSeconds();           
                sDeg = 6 * s;
                mDeg = 6 * (m + s / 60) ;
               
                hDeg = 30 * (h + m / 60);
                if(s == 0 ){
                    console.log('set transiton 0')
                    sHand.style.transitionDuration = "0s";
                }else{
                    sHand.style.transitionDuration = "0.5s";
                }
                sHand.style.transform = `rotate(${sDeg}deg)`;
                mHand.style.transform = `rotate(${mDeg}deg)`;
                hHand.style.transform = `rotate(${hDeg}deg)`
            };

            //初始化指针时候的过渡动画
            function initHand(date) {
                setClock(date);
                for (let i = 0; i < hands.length; i++) {
                    hands[i].style.transition = "transform 1s linear";
                    setTimeout(function(){
                        hands[i].style.transition = null
                    },1000);

                }
            }
            // 启动始终
            function startClock() {
                let now = new Date();
                
                initHand(now);
                
                setInterval(function () {
                    let now = new Date();
                    setClock(now)
                }, 1000)
            }
            //启动函数
            startClock();
        }
    </script>
</body>

</html>